<template>
  <div>
    <!-- 下载模板 -->
    <InfoCard
      m-20
      title="填写导入数据信息"
      desc="请按照数据模板的格式准备导入数据，模板中的表头名称不可更改，表头行不能删除"
      operation-title="下载模板"
      :operation="onDownloadTemplate"
    />

    <!-- 上传文件 -->
    <InfoCard
      m-20
      title="上传填好的信息表"
      desc="文件后缀名必须为xls 或xlsx （即Excel格式），文件大小不得大于10M"
      operation-title="上传文件"
      :operation="onUploadFile"
    >
      <template #icon>
        <i-ep-upload-filled size-36 />
      </template>

      <template #operation>
        <el-upload
          v-model:file-list="fileList"
          class="mb--10 mt-5"
          action="https://run.mocky.io/v3/9d059bf9-4660-41e5-a568-c5931758736b"
          :on-success="onUploadSuccess"
        >
          <el-button v-if="fileList.length === 0" type="primary">上传文件</el-button>
        </el-upload>
      </template>
    </InfoCard>

    <!-- 特别提示 -->
    <div class="m-20 p-20 bg-#fff5e6 flex">
      <div flex-y-center w-40>
        <i-ep-warning color-yellow-500 size-26 />
      </div>

      <div flex-col flex-1>
        <span c-6>特别提示</span>
        <span>导入前请仔细检查表格必填信息是否填写完整，并确保表格内数据未通过其他形式创建。</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import InfoCard from './info-card.vue'

// 下载模板
const onDownloadTemplate = () => {
  console.log('下载模板')
}

// 上传文件
const fileList = ref<File[]>([])
const onUploadFile = () => {
  console.log('上传文件')
}

const onUploadSuccess = (response: any) => {
  console.log('上传成功', response)
}
</script>
